<template>
  <div style="padding-left: 18px">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      class="main"
      label-width="110px"
    >
      <div class="stepBox">
        <div>新建场景 只需 3 步</div>
        <div class="step">
          <span class="step1">我希望</span>
          <span class="step2" :class="percenNum === 18 && 'w'"
            >满足以下条件的保单</span
          >
          <span
            class="step3"
            :class="percenNum === 45 || (percenNum === 75 && 'w')"
            >按照以下服务策略</span
          >
          <span class="step4" :class="percenNum === 100 && 'w'"
            >成功创建场景</span
          >
        </div>
        <div class="progressBox">
          <el-progress
            :stroke-width="15"
            :percentage="percenNum"
            :format="format"
          ></el-progress>
        </div>
      </div>
      <div v-if="percenNum === 18">
        <el-form-item label="任务名称：" prop="renewtaskname">
          <el-input
            v-model="form.renewtaskname"
            placeholder="请录入"
          ></el-input>
        </el-form-item>
        <el-form-item label="管理机构：" prop="managecom">
          <el-select v-model="form.managecom" multiple placeholder="请选择">
            <el-option
              v-for="item in organizationList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="渠道：" prop="salchnel">
          <el-select v-model="form.salchnel" multiple placeholder="请选择渠道">
            <el-option
              v-for="item in channelList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="应交月范围：">
          <el-col :span="6">
            <el-date-picker
              type="date"
              placeholder="请选择起始日期"
              v-model="form.contConditionDTO.ljspayStartDate"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
          <el-col class="line" :span="2" style="text-align: center">-</el-col>
          <el-col :span="6">
            <el-date-picker
              type="date"
              placeholder="请选择终止日期"
              v-model="form.contConditionDTO.ljspayEndDate"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="保费范围：">
          <el-col :span="6">
            <el-input
              style="width: 100%"
              v-model="form.contConditionDTO.premLimitStart"
              value="number"
              placeholder="请输入最低金额"
            ></el-input>
          </el-col>
          <el-col class="line" :span="2" style="text-align: center">-</el-col>
          <el-col :span="6">
            <el-input
              style="width: 100%"
              v-model="form.contConditionDTO.premLimitEnd"
              value="number"
              placeholder="请输入最高金额"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="保单类型：">
          <el-radio-group v-model="form.contConditionDTO.contType">
            <el-radio label="working">在职单</el-radio>
            <el-radio label="orphan">孤儿单</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="保单年度：">
          <el-select v-model="form.contConditionDTO.contYears" multiple placeholder="请选择">
            <el-option
              v-for="item in contYearsList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="交费方式：">
          <el-checkbox-group v-model="form.contConditionDTO.payType">
            <el-checkbox
              v-for="item in paymentList"
              :label="item.code"
              :key="item.code"
              >{{ item.name }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="保单标签：">
          <el-checkbox-group v-model="form.contConditionDTO.contLabel">
            <el-checkbox
              v-for="item in PolicyList"
              :label="item.code"
              :key="item.code"
              >{{ item.name }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="客户标签：">
          <el-checkbox-group v-model="form.contConditionDTO.customerLabel">
            <el-checkbox
              v-for="item in customerList"
              :label="item.code"
              :key="item.code"
              >{{ item.name }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="代理人标签：">
          <el-checkbox-group v-model="form.contConditionDTO.agentLabel">
            <el-checkbox
              v-for="item in agentList"
              :label="item.code"
              :key="item.code"
              >{{ item.name }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="服务人员标签：">
          <el-checkbox-group v-model="form.contConditionDTO.serviceLabel">
            <el-checkbox
              v-for="item in serviceList"
              :label="item.code"
              :key="item.code"
              >{{ item.name }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
      </div>
    </el-form>
    <div v-if="percenNum === 45">
      <div>
        <el-table :data="strategyDTOList" style="width: 100%">
          <el-table-column prop="name" label="序号"></el-table-column>
          <el-table-column
            prop="timeNode"
            label="服务时间节点"
          ></el-table-column>
          <el-table-column
            prop="preconditions"
            label="前置条件"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="serviceManner"
            label="服务方式"
            align="center"
          ></el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="{ row }">
              <el-button size="mini" type="text">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="addNodeBut">
          <i class="el-icon-circle-plus-outline"></i>
          <span @click="addNode">添加新节点</span>
        </div>
      </div>

      <div v-if="isShow" class="addNodeBox">
        <el-form
          ref="formNode"
          :model="formNode"
          :rules="rules"
          class="main"
          label-width="120px"
        >
          <div>
            <span></span>
            添加新节点
          </div>
          <div>
            <el-form-item label="时间节点：" prop="timeNode">
              <el-input
                v-model="formNode.timeNode"
                placeholder="请录入数字"
              ></el-input>
            </el-form-item>
            <el-form-item label="前置条件：" prop="preconditions">
              <el-select v-model="formNode.preconditions" placeholder="请选择">
                <el-option
                  v-for="item in condition"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="服务类型：" prop="serviceType">
              <el-radio-group v-model="formNode.serviceType">
                <el-radio label="sms">短信提醒</el-radio>
                <el-radio label="call">智能外呼</el-radio>
                <el-radio label="human">人工服务</el-radio>
              </el-radio-group>
            </el-form-item>
            <div v-if="formNode.serviceType=='call'">
              <el-form-item label="外呼模板：" prop="callStencil">
                <el-select
                  v-model="formNode.callStencil"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in callStencilList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="未接通后是否发送短信：" prop="isSendSms">
                <el-radio-group v-model="formNode.isSendSms" @change="wan">
                  <el-radio label="01">是</el-radio>
                  <el-radio label="02">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="发送短信模板：" prop="smsStencil">
                <el-select
                  v-model="formNode.smsStencil"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in smsStencilList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否二次外呼：" prop="isTwoCalls">
                <el-switch
                v-model="formNode.isTwoCalls"
                class="tablescopeswitch"
                active-value="02"
                inactive-value="01"
                active-text="已开启"
                inactive-text="已禁用"
              >
              </el-switch>
              </el-form-item>
              <el-form-item label="二呼执行时间：" prop="twoCallsTime">
                <el-select
                  v-model="formNode.twoCallsTime"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in twoCallsTimeList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="完成条件：" prop="callsConditions">
                <el-select
                  v-model="formNode.callsConditions"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in callsConditionsList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div v-else>
              <el-form-item label="服务方式：" prop="serviceManner">
                <el-select
                  v-model="formNode.serviceManner"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in serviceMode"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="主管陪访：" prop="needAccompany">
                <el-radio-group v-model="formNode.needAccompany">
                  <el-radio label="working">需要</el-radio>
                  <el-radio label="orphan">不需要</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="完成条件：" prop="doneConditions">
                <el-select
                  v-model="formNode.doneConditions"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in completionConditions"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
          <div>
            <el-button type="primary" @click="saveNode()">保存</el-button>
          </div>
        </el-form>
      </div>
    </div>
    <div v-if="percenNum === 75">
      <div style="text-align: center; margin-top: 20px">
        <img style="width: 60%" src="../img/establish.png" alt="" />
        <div style="font-size: 14px; color: #1d1d1d; margin-top: -35px">
          场景创建中……
        </div>
      </div>
    </div>
    <div v-if="percenNum === 100">
      <div style="text-align: center; margin-top: 20px">
        <img style="width: 60%" src="../img/success.png" alt="" />
        <div style="font-size: 14px; color: #1d1d1d; margin-top: -25px">
          创建成功的场景会在次日开始生效，符合条件的保单将按规则生成对应任务
        </div>
      </div>
    </div>

    <div class="foot">
      <div class="btnBox">
        <el-button
          plain
          @click="closeDialogRight1()"
          v-if="percenNum === 18 || percenNum === 45"
          >取消</el-button
        >
        <el-button type="primary" v-if="percenNum === 18" @click="next(45)"
          >下一步</el-button
        >
        <el-button type="primary" v-if="percenNum === 45" @click="next(75)"
          >下一步</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import { validateNum, validatePhone } from "@/utils/validate";
import { getPlat, getSource } from "@/api/sourceManage/sourceManage";

export default {
  props: {
    percenNum: {
      type: Number,
      default: () => [],
    },
  },
  data() {
    return {
      isShow: false,
      strategyDTOList: [],
      formNode: {
      },
      form: {
        contConditionDTO:{
        payType: [],
        contLabel: [],
        customerLabel: [],
        agentLabel: [],
        serviceLabel: [],
        }
      },
      percenNum: this.percenNum,
      // 管理机构：
      organizationList: [
        {
          code: 0,
          name: "全部",
        },
        {
          code: 1,
          name: "上海分公司",
        },
        {
          code: 2,
          name: "江苏分公司",
        },
        {
          code: 3,
          name: "安徽分公司",
        },
        {
          code: 4,
          name: "北京分公司",
        },
      ],
      // 渠道：
      channelList: [
        {
          code: 1,
          name: "全部",
        },
        {
          code: 2,
          name: "个险",
        },
        {
          code: 3,
          name: "团险",
        },
        {
          code: 4,
          name: "经代",
        },
        {
          code: 5,
          name: "银保",
        },
      ],
      // 保单年度：
      contYearsList: [
        {
          code: 1,
          name: "1年",
        },
        {
          code: 2,
          name: "2年",
        },
        {
          code: 3,
          name: "3年",
        },
        {
          code: 4,
          name: "4年",
        },
        {
          code: 5,
          name: "5年",
        },
        {
          code: 6,
          name: "6年及以上",
        },
      ],
      // 交费方式：
      paymentList: [
        {
          code: "year",
          name: "年交",
        },
        {
          code: "half",
          name: "半年交",
        },
        {
          code: "quarter",
          name: "季交",
        },
        {
          code: "month",
          name: "月交",
        },
      ],
      // 保单标签
      PolicyList: [
        {
          code: "together",
          name: "共展单",
        },
        {
          code: "denial",
          name: "拒赔史",
        },
        {
          code: "claim",
          name: "理赔史",
        },
        {
          code: "self",
          name: "自保件",
        },
        {
          code: "each",
          name: "互保件",
        },
      ],
      // 客户标签：
      customerList: [
        {
          code: "complain",
          name: "投诉客户",
        },
        {
          code: "delay",
          name: "交费拖延",
        },
        {
          code: "vip",
          name: "VIP 客户",
        },
        {
          code: "first",
          name: "首单客户",
        },
      ],
      // 代理人标签：
      agentList: [
        {
          code: "lowContinue",
          name: "低继续率",
        },
        {
          code: "newAgent",
          name: "3 月内新人",
        },
        {
          code: "hire",
          name: "聘才",
        },
      ],
      // 服务人员标签：
      serviceList: [
        {
          code: "lowContinue",
          name: "低继续率",
        },
        {
          code: "lowQuality",
          name: "低品质",
        },
        {
          code: "newAgent",
          name: "3 月内新人",
        },
      ],
      // 前置条件
      condition: [
        {
          code: "none",
          name: "无",
        },
        {
          code: "upCompleted",
          name: "上一节点已完成",
        },
        {
          code: "tobeCompleted",
          name: "上一节点未完成",
        },
        {
          code: "unPaid",
          name: "客户未交费",
        },
      ],
      // 服务方式、
      serviceMode: [
        {
          code: "phoneCus",
          name: "电话联系客户",
        },
        {
          code: "internetCus",
          name: "网络联系客户",
        },
        {
          code: "faceCus",
          name: "面访客户",
        },
        {
          code: "phoneAgent",
          name: "电话联系代理人",
        },
        {
          code: "internetAgent",
          name: "网络联系代理人",
        },
        {
          code: "faceAgent",
          name: "面访代理人",
        },
      ],
      // 完成条件
      completionConditions: [
        {
          code: "none",
          name: "无",
        },
        {
          code: "doneService",
          name: "完成服务记录",
        },
        {
          code: "doneServicePlus",
          name: "完成服务记录且记录“已完成”",
        },
        {
          code: "donePay",
          name: "客户完成交费",
        },
      ],
      // 外呼模版
      callStencilList: [
        {
          code: "urgedSms",
          name: "交期催收提醒模板",
        },
        {
          code: "forwardSms",
          name: "前瞻续收提醒模板",
        },
        {
          code: "ljspaySms",
          name: "应交前续收提醒模板",
        },
      ],
      twoCallsTimeList: [
        {
          code: 1,
          name: "1",
        },
        {
          code: 2,
          name: "2",
        },
        {
          code: 3,
          name: "3",
        },
        {
          code: 4,
          name: "4",
        },
        {
          code: 5,
          name: "5",
        },
      ],
      // 二呼完成条件
      callsConditionsList: [
        {
          code: "none",
          name: "无",
        },
        {
          code: "called",
          name: "已呼出",
        },
        {
          code: "calledAndCon",
          name: "呼出并接通",
        },{
          code: "conAndCus",
          name: "接通并收集到客户意向",
        },
      ],
      smsStencilList: [
        {
          code: "催缴短信a模板",
          name: "催缴短信a模板",
        }
      ],
      rules: {
        renewtaskname: [
          { required: true, message: "请输入任务名称", trigger: "blur" },
        ],
        managecom: [
          { required: true, message: "请选择管理机构", trigger: "change" },
        ],
        salchnel: [
          { required: true, message: "请选择渠道", trigger: "change" },
        ],
        timeNode: [
          { required: true, message: "请输入时间节点", trigger: "blur" },
        ],
        preconditions: [
          { required: true, message: "请选择前置条件", trigger: "change" },
        ],
        serviceType: [
          { required: true, message: "请选择服务类型", trigger: "blur" },
        ],
        serviceManner: [
          { required: true, message: "请选择服务方式", trigger: "change" },
        ],
        needAccompany: [
          { required: true, message: "请选择主管陪访", trigger: "blur" },
        ],
        doneConditions: [
          { required: true, message: "请选择完成条件", trigger: "change" },
        ],
        callStencil: [
          { required: true, message: "请选择外呼模板", trigger: "change" },
        ],
        isSendSms: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        smsStencil: [
          { required: true, message: "请选择发送短信模板", trigger: "change" },
        ],
        isTwoCalls: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        twoCallsTime: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        callsConditions: [
          { required: true, message: "请选择", trigger: "change" },
        ],
      },
    };
  },
  mounted() {},
  watch: {
    percenNum(value) {
      if (value === 75) {
        setTimeout(() => {
          this.percenNum = 100;
          this.submitForm();
        }, 2000);
      }
    },
  },
  methods: {
    wan(value){
      console.log(value)
      // if(value=='01'){
      //     this.formNode.smsStencil='催缴短信a模板'
      // }else{
      //   this.formNode.smsStencil=''
      // }
    },
    format(percentage) {
      return "";
    },
    next(value) {
      this.percenNum = value;
    },
    // 保存节点
    saveNode() {
      this.isShow = false;
      this.strategyDTOList.push(this.formNode);
      this.formNode = {};
    },
    // 添加节点
    addNode() {
      this.isShow = true;
    },

    submitForm() {
      this.form={...this.form ,strategyDTOList:this.strategyDTOList} 
      this.$emit("sendScreenMessage1", this.form);
      this.strategyDTOList= [],
      this.formNode={},
      this.form= {
        contConditionDTO:{
        payType: [],
        contLabel: [],
        customerLabel: [],
        agentLabel: [],
        serviceLabel: [],
        }
      }
    },
    closeDialogRight1() {
      this.percenNum = 18;
      this.form = {};
      this.formNode={},
      this.form.strategyDTOList=[]
      this.$emit("closeDialogRight1");
    },
  },
};
</script>
<style lang="scss" scoped>
.stepBox {
  .step {
    position: relative;
    height: 50px;
    background-image: url("../img/progress.png");
    background-size: 100%;
    font-weight: 400;
    font-size: 16px;
    color: #abb7cb;
  }

  .step1 {
    position: absolute;
    left: 2%;
  }

  .step2 {
    position: absolute;
    left: 21%;
  }

  .step3 {
    position: absolute;
    left: 50%;
  }

  .step4 {
    position: absolute;
    left: 80%;
  }

  .w {
    font-weight: 500;
    font-size: 16px;
    color: #293f66;
  }
  .progressBox {
    padding: 20px 19px 10px 10px;
  }
}

.addNodeBut {
  height: 43.6px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #f84c47;
  border: 2px solid #f0f0f0;
  border-top: none;
}
.addNodeBox {
  margin-top: 20px;
}

.el-input {
  width: 50%;
}
.el-select {
  width: 50%;
}

.foot {
  position: absolute;
  left: 80%;
  bottom: 35px;
  z-index: 2;
  background: #fff;
  display: flex;
  padding: 5px 10px;
  justify-content: space-between;
  width: 100%;
}
::v-deep .el-progress {
  .el-progress-bar {
    padding-right: 0;
    .el-progress-bar__inner {
      background: linear-gradient(90deg, #43e0a2 0%, #3580ff 100%);
    }
  }
}
</style>
